
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>报名</title>
    <script src="./js/jquery.min.js"></script>
    <script src="./js/common.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        #app {
            height: 100%;
            width: 100%;
            /* max-width: 720px; */
            max-width: 480px;
            /* max-height: 1282px; */
            max-height: 860px;
            background-image: url("./imgs/bej02.png");
            /* background-size: cover; */
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
        }

        .item img {
            position: relative;
            top: -5%;
            transform: scale(0.5);
        }

        .item .text {
            position: relative;
            bottom: 15%;
        }

        .box{
            background-color: #FFF;
            width: 94%;
            position: absolute;
            top: 10%;
            bottom: 5%;
            left: 50%;
            transform: translateX(-50%);
            border-radius: 10px;
            overflow: auto;
        }

        .right span{
            font-size: 14px;
            padding: 4px 8px;
            background-color: #eef3ff;
            margin-right: 8px;
            border-radius: 4px;
            color: #5476dc;
        }

        .c4 {
            margin-left: 30px;
            margin-top: 5px;
            padding: 5px;
            color: #959595;
        }

        .c5 {
            margin-left: 30px;
            margin-top: 5px;
            padding: 5px;
            color: black;
        }

        .c6 {
            margin-left: 30px;
            margin-top: 0px;
            padding: 5px;
            color: black;
        }

        .left_div {
            float: left;
            width: 40%;
            height: 180px;
            padding: 0px 0px 0px 30px;
        }

        .right_div {
            float: left;
            width: 60%;
            height: 180px;
            padding: 0px 0px 0px 35px;
            font-size: 18px;
        }

        .input {
            width: 150px;
        }
        .input2 {
            width: 90px;
        }

        .left_div2 {
            float: left;
            width: 50%;
            height: 180px;
            padding: 0px 0px 0px 0px;
            font-size: 18px;
        }

        .right_div2 {
            float: left;
            width: 50%;
            height: 180px;
            padding: 0px 0px 0px 0px;
            font-size: 18px;
        }

        .bm {
            padding-top: 20px;
            font-size: 26px;
            width: 100%;
            height: 20px;
            margin: 0 auto;
            text-align: center;
            color: white;
        }

        .saveBtn {
            border-radius: 18px;
            width: 80%;
            height: 35px;
            font-size: 18px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="bm">报名</div>
    <div class="box" @scroll="handleScroll">
        <div id="wsm">
            <div class="c4">
                <span id="xmb">姓名</span>
                <span>
                    <input id="name" class="input"></input>
                </span>
            </div>
            <div class="c4">
                <span id="sfb">身份证</span>
                <span>
                    <input id="name" class="input"></input>
                </span>
            </div>
            <div class="c4" id="ztc">
            </div>
            <div style="text-align: center;">
                <button class="saveBtn" id="tj" onclick="smrz"></button>
            </div>
            <div style="width: 90%;margin: 40px auto;">
                <hr>
            </div>
        </div>
        <div id="ysm">
            <div class="c4" id="xmc">
                姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:&nbsp;&nbsp;&nbsp;&nbsp;王麻子
            </div>
            <div class="c4" id="sfc">
                身份证号:&nbsp;&nbsp;&nbsp;&nbsp;500000000000000000
            </div>
            <div class="c4" id="ztc">
                状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态:&nbsp;&nbsp;&nbsp;&nbsp;已实名
            </div>
            <div style="width: 90%;margin: 40px auto;">
                <hr>
            </div>
        </div>
        <div id="sfsm">
            <div style="height: 200px">
                <div class="left_div">
                    <img id="imgTouXiang" style="width: 150px; height: 150px;" src="./imgs/9.png"/>
                    <input type="file" accept="image/*" name="file" id="uploadImage" onchange="postData()">
                </div>
                <div class="right_div">
                    <div class="c6" id="xm">
                    </div>
                    <div class="c5" id="sj">
                    </div>
                    <div class="c5" id="xb">
                    </div>
                    <div class="c5" id="cs">
                    </div>
                </div>
            </div>
            <div id="xxts" style="margin-left: 30px;width:380px; background-color: #DAB0F8; color: white; border-radius: 15px">
                &nbsp;&nbsp;&nbsp;相亲信息（请真是填入，虚假信息违约）
            </div>
            <div style="width: 90%;margin: 20px auto;">
                <hr>
            </div>
            <div class="left_div2">
                <div class="c6">
                    <span id="xxxnA">年薪</span>
                    <span>
                        <select id="jhnx"></select>
                    </span>
                    <span id="xxxnC"></span>
                </div>
                <div class="c5">
                    <span id="xxHyA">婚姻</span>
                    <span>
                        <select id="jhhy"></select>
                    </span>
                </div>
                <div class="c5">
                    <span id="xxqqA">QQ</span>
                    <span>
                        <input id="xxqqB" class="input2"></input>
                    </span>
                </div>
                <div class="c5">
                    <span id="xxxxA">微信</span>
                    <span>
                        <input id="xxxxB" class="input2"></input>
                    </span>
                </div>
            </div>
            <div class="right_div2">
                <div class="c6">
                    <span id="xxxlA">学历</span>
                    <span>
                        <select id="jhxl">
                        </select>
                    </span>
                    <span id="xxxlC"></span>
                </div>
                <div class="c5">
                    <span id="xxzyA">职业</span>
                    <span>
                        <select id="jhzy">
                        </select>
                    </span>
                </div>
                <div class="c5">
                    <span id="xxsgA">身高</span>
                    <span>
                        <select id="jhsg"></select>
                    </span>
                    <span id="xxsgC"></span>
                </div>
                <div class="c5">
                    <span id="xxcsA">城市</span>
                    <span>
                        <input id="xxcsB" class="input2"></input>
                    </span>
                </div>
            </div>
            <div style="width: 90%;margin: 20px auto;">
                <hr>
            </div>
            <div style="margin-left: 30px;">
                其他：有车有房无贷款
            </div>
            <div style="text-align: center;">
                <button class="saveBtn" onclick="save()">保存</button>
            </div>
        </div>
    </div>

</div>
<script>
    $(function() {
        var id = getUrlParameters().id;
        if (id) {
            getDetail(id);
        }
    });

    /**
     * 保存基本信息
     */
    function save() {
        var id = getUrlParameters().id;
        var sb = getDeviceId();
        var mbid = $("#imgTouXiang").attr('src');
        var aa = $("#jhnx").val();
        var ab = $("#jhxl").val();
        var ac = $("#jhhy").val();
        var ad = $("#jhzy").val();

        var ae = $("#xxqqB").val();
        var ag = $("#jhsg").val();
        var ah = $("#xxxxB").val();
        var ai = $("#xxcsB").val();
        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id="+id+"&sb="+sb+
            "&spsl=0&mbid="+mbid+"&AA="+aa+"&AB="+ab+"&AC="+ac+"&AD="+ad+
            "&AE="+ae+"&AG="+ag+"&AH="+ah+"&AI="+ai+"&AJ=真诚相亲";
        console.log(url)
        $.ajax({
            url: url,
            type: "post",
            dataType: 'json',
            success: function(params) {
                alert("保存成功")
            },
            error: function(data) {

            }
        });
    }

    /**
     * 上传图片
     */
    function postData() {
        var formData = new FormData();
        formData.append("file", $("#uploadImage")[0].files[0]);
        var sb = getDeviceId();
        var url = "http://jk.xmll.xyz//jk/img/imgn.ashx?AB="+sb+"&AA=89"
        $.ajax({
            url: url,
            type: "post",
            data: formData,
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            dataType: 'text',
            success: function(data) {
                var params = JSON.parse(data)
                if (params.code == 1) {
                    $("#imgTouXiang").attr('src', params.msg);
                } else {
                    alert("图片上传失败")
                }
                // var params = JSON.parse(data)
                // $("#img").attr("src", params);
            },
            error: function(data) {

            }
        });
    }

    // 实名认证
    function smrz() {

    }

    function getDetail(id) {
        var sb = getDeviceId();
        var url = "http://jk.xmll.xyz/jk/jkFl/xq.ashx?id=11&sb="+sb;
        $.ajax({
            url: url, // 请求的URL
            type: "POST", // 请求类型，默认为GET
            dataType: "json", // 预期服务器返回的数据类型
            success: function(response) { // 请求成功时的回调函数
                if (response.code == 1) {

                    if (response.ztc == "已实名") {
                        $("#sfsm").show();
                        $("#wsm").hide();
                        $("#ysm").show();
                    } else {
                        $("#sfsm").hide();
                        $("#wsm").show();
                        $("#ysm").hide();
                    }

                    console.log(response)
                    // 添加年薪option
                    for (var i = 0; i < response.jhnx.length; i++) {
                        var v = response.jhnx[i].trim();
                        $('#jhnx').append("<option value='"+v+"'>"+v+"</option>");
                    }

                    // 添加学历option
                    for (var i = 0; i < response.jhxl.length; i++) {
                        $('#jhxl').append("<option value='"+response.jhxl[i]+"'>"+response.jhxl[i]+"</option>");
                    }

                    // 添加职业option
                    for (var i = 0; i < response.jhzy.length; i++) {
                        $('#jhzy').append("<option value='"+response.jhzy[i]+"'>"+response.jhzy[i]+"</option>");
                    }

                    // 添加职业option
                    for (var i = 0; i < response.jhsg.length; i++) {
                        $('#jhsg').append("<option value='"+response.jhsg[i]+"'>"+response.jhsg[i]+"</option>");
                    }

                    // 添加婚姻option
                    for (var i = 0; i < response.jhhy.length; i++) {
                        var v = response.jhhy[i].trim();
                        $('#jhhy').append("<option value='"+v+"'>"+v+"</option>");
                    }

                    // 未认证时
                    $("#xmb").text(response.xmb);
                    $("#sfb").text(response.sfb);
                    $("#tj").text(response.tj);

                    $("#xmc").text(response.xmb + response.xmc)
                    $("#sfc").text(response.sfb + response.sfc)
                    $("#ztc").text(response.ztb + response.ztc)
                    $("#xxts").text(response.xxts)
                    $("#xxxnA").text(response.xxxnA)

                    // 第二部分右侧显示
                    $("#xm").text(response.xm);
                    $("#sj").text(response.sj);
                    $("#xb").text(response.xb);
                    $("#cs").text(response.cs);

                    // 第三部分，反显
                    // 年薪选择
                    console.log(response.xxxnB)
                    $("#jhnx").val(response.xxxnB);
                    // 学历选择
                    $("#jhxl").val(response.xxxlB);
                    // 职业选择
                    $("#jhzy").val(response.xxzyB);
                    // 身高选择
                    $("#jhsg").val(response.xxsgB);
                    // 婚姻选择
                    $("#jhhy").val(response.xxHyB);

                    $("#xxHyA").val(response.xxHyA);

                    $("#xxxnC").text(response.xxxnC)
                    //$("#xxxnA").text(response.xxxnA + response.xxxnB + response.xxxnC)
                    $("#xxqqA").text(response.xxqqA)
                    $("#xxqqB").val(response.xxqqB)

                    $("#xxxxA").text(response.xxxxA)
                    $("#xxxxB").val(response.xxxxB)

                    $("#xxxlA").text(response.xxxlA)

                    $("#xxzyA").text(response.xxzyA)

                    $("#xxsgA").text(response.xxsgA)
                    $("#xxsgB").val(response.xxsgB)
                    $("#xxsgC").text(response.xxsgC)

                    $("#xxcsA").text(response.xxcsA)
                    $("#xxcsB").val(response.xxcsB)

                }
            },
            error: function(xhr, status, error) { // 请求失败时的回调函数
                console.error(error); // 在控制台打印错误信息
            }
        });
    }
</script>
</body>
</html>
